<div class="input-group">
    <span class="input-group-btn input-group-prepend">
        <span class="btn btn-danger" id="input-left{{$id}}">
            <i class="{{if empty($value)}}fa fa-camera-retro{{else/}}{{$value}}{{/if}}"></i>
        </span>
    </span>
    <input class="form-control {{$class}}" type="text" name="{{$name}}" id="{{$id}}" placeholder="{{$placeholder}}" value="{{$value}}"
    {{$disabled ? 'disabled=" disabled"':''}} {{$readonly ? 'readonly="readonly"':''}}>
    <span class="input-group-btn input-group-append">
        <button type="button" data-toggle="modal" href="#{{$id}}modalDialog" role="button" class="btn btn-primary input-group-append">
            选择
        </button>
    </span>
</div>
<div class="modal fade" id="{{$id}}modalDialog" tabindex="-1" role="dialog"
     aria-labelledby="{{$id}}modalDialogLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 95%!important;max-width: 95%!important;">
        <div class="modal-content">
            <div class="modal-body">
                <div class="input-group" style="margin-bottom:20px;">
                    <input type="text" class="form-control" id="{{$id}}modalDialog_search_input" placeholder="输入关键字搜索图标">
                    <span class="input-group-btn input-group-append">
                        <button type="button" class="btn btn-primary" id="{{$id}}modalDialog_search_btn" style="cursor: pointer;">图标搜索</button>
                    </span>
                </div>
                <div class="tab-base" role="tablist">
                    <ul class="nav nav-tabs">
                        {{foreach $list as $k=>$v}}
                        <li class="nav-item {{if $k==0}}active{{/if}}">
                            <a href="#ico-tab-table1-{{$k}}" data-toggle="tab" class="nav-link {{if $k==0}}active{{/if}}">{{$v.pre}}</a>
                        </li>
                        {{/foreach}}
                    </ul>
                    <div class="tab-content text-left" style="margin: 0;padding: 0;">
                        {{foreach $list as $k=>$v}}
                        <div class="tab-pane {{if $k==0}}active in{{/if}}" id="ico-tab-table1-{{$k}}" style="margin-top: 15px;">
                            {{foreach $v['ico'] as $sk=>$sv}}
                            <button data-ico="{{$v.pre}}{{$sv}}"
                                    class="ico-item btn btn-primary" data-dismiss="modal" aria-hidden="true" type="button"
                                    style="display: inline-block;padding: 10px;margin:0 2px 4px 2px ; border: solid 1px #CCC;width: 45px;height: 45px;text-align: center;vertical-align: middle; cursor: pointer;">
                                <i class="{{$v.pre}}{{$sv}}"></i>
                            </button>
                            {{/foreach}}
                        </div>
                        {{/foreach}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{:builder_event_listen($js_hook, function () use($id) {
return <<<HOOK
<script type="text/javascript">
    $(document).on('click', '#{$id}modalDialog button.ico-item', function () {
        var ico = $(this).attr('data-ico');
        var icoHtml = '<i class="' + ico + '"></i>';
        $('input#{$id}').val(ico);
        $('#input-left{$id}').html(icoHtml);
    });
    $(document).on('click', '#{$id}modalDialog_search_btn', function () {
        searchIco('#{$id}modalDialog');
    });
    $(document).on('change keyup', '#{$id}modalDialog_search_input', function () {
        searchIco('#{$id}modalDialog');
    });
    
    function searchIco(id) {
        var search_input_id = id + '_search_input';
        var keyWord = $(search_input_id).val();
        var reg = new RegExp(keyWord);
        $(id + ' .ico-item').each(function () {
            var _thisIco = $(this).attr('data-ico');
            if (_thisIco.match(reg)) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    }
</script>
HOOK;
})}}